<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useLmsStoreHook } from "@/store/modules/lms";
import type { UploadProps } from "element-plus";
import {
  getCourseFolderList,
  fileUploadUrl,
  createCourse
} from "@/api/lms/course";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";

const lmsStore = useLmsStoreHook();

const folderList = ref<any>([]);

onMounted(() => {
  getCourseFolderList().then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.name,
        value: item.folderId
      });
      folderList.value = li;
    });
  });
});

const commitForm = () => {
  createCourse(lmsStore.addCourseForm).then(res => {
    lmsStore.currCourseInfoDto.baseInfo = res;
    lmsStore.currStep++;
  });
};

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log(">>", response, uploadFile);
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  console.log(rawFile);
  return true;
};
defineExpose({
  commitForm
});
</script>

<template>
  <div style="width: 100%">
    <el-divider content-position="left">基本信息</el-divider>
    <el-form :model="lmsStore.addCourseForm" label-width="auto">
      <el-form-item label="课程编号">
        <el-input
          v-model="lmsStore.addCourseForm.code"
          placeholder="请输入课程编号"
          :maxlength="20"
          show-word-limit
          clearable
        />
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input
          v-model="lmsStore.addCourseForm.name"
          placeholder="请输入课程名称"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="课程目录">
        <el-select
          v-model="lmsStore.addCourseForm.folderId"
          placeholder="请选择课程所属目录"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in folderList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="倍速播放">
        <el-input-number
          v-model="lmsStore.addCourseForm.allowedX"
          :min="0"
          :max="10"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="学分">
        <el-input-number
          v-model="lmsStore.addCourseForm.classScore"
          :min="0"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="学时">
        <el-input-number
          v-model="lmsStore.addCourseForm.classHour"
          :min="0"
          show-word-limit
          clearable
          prefix-icon="el-icon-user-solid"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="标签">
        <el-input
          v-model="lmsStore.addCourseForm.label"
          placeholder="标签"
          :maxlength="20"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="课程概述">
        <el-input
          v-model="lmsStore.addCourseForm.describe"
          placeholder="请输入课程概述"
          :maxlength="500"
          type="textarea"
          :rows="2"
          show-word-limit
          clearable
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item label="上传封面">
        <el-upload
          action=""
          :http-request="fileUploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button link type="primary" :icon="useRenderIcon(AddFill)">
            选择文件
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.bar-row {
  width: 100%;
}
</style>
